<template>
  <div class="menuManagement-container">
    <div style="display: flex; flex-wrap: nowrap">
      <div>
        <div
          class="roleBox"
          @click="handleRole(item)"
          v-for="item in roleList"
          :key="item.id"
          :class="[item.id === roleID ? 'roleBoxActive' : '']"
        >
          <div style="display: flex; align-items: center">
            <img src="@/assets/user001.svg" alt="" />
            <span class="roleName">
              {{ item.roleName }}
            </span>
          </div>

          <div class="selectBox">
            <i class="el-icon-arrow-right" style="font-weight: 600"></i>
          </div>
        </div>
      </div>

      <div style="width: 80%; margin-left: 25px;overflow: auto;">
        <el-table
          v-loading="routerLoading"
          :data="routerList"
          :element-loading-text="elementLoadingText"
          row-key="menuId"
          :tree-props="{ children: 'childMenus' }"
        >
          <el-table-column label="菜单名称" prop="menuName" />

          <el-table-column label="菜单类型" prop="menuType" width="100">
            <template #default="{ row }">
              <el-tag v-if="row.menuType == 'M'">目录</el-tag>
              <el-tag v-else-if="row.menuType == 'C'" type="success">菜单</el-tag>
              <el-tag v-else-if="row.menuType == 'F'" type="warning">按钮</el-tag>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="菜单路径" prop="url" />

          <el-table-column label="是否授权" prop="visible" width="100">
            <template #default="{ row }">
              <el-switch @change="() => handleChange(row)" :value="menuIdsList.indexOf(row.menuId) != -1" :disabled="isSwitch"></el-switch>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
  import { getRouterList, getMenuByRoleId, setAuthorityAdd } from '@/api/router'
  import { getRoleAllList } from '@/api/roleManagement'

  export default {
    name: 'MenuManagement',
    data() {
      return {
        data: [],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
        routerLoading: true,
        routerList: [], // 菜单列表

        roleLoading: true,
        isSwitch: true,
        roleID: '',
        roleList: [], // 角色列表
        elementLoadingText: '正在加载...',

        menuIdsList: [], // 选择到的路由
      }
    },
    async created() {
      this.getRoleAll()
      this.getRouterAll()
    },

    methods: {
      // 选择了该菜单
      async handleChange(row) {
        let index = this.menuIdsList.indexOf(row.menuId)
        if (index !== -1) {
          this.menuIdsList.splice(index, 1)
        } else {
          this.menuIdsList.push(row.menuId)
        }

        try {
          this.isSwitch = true
          await setAuthorityAdd({
            roleId: this.roleID,
            menuIds: this.menuIdsList,
          })
          this.$baseMessage('操作成功', 'success')
          this.isSwitch = false
        } catch (error) {
          this.isSwitch = false
        }
      },
      // 选择角色
      async handleRole(item) {
        try {
          this.roleID = item.id
          this.routerLoading = true
          const { data } = await getMenuByRoleId({ roleId: item.id })
          this.menuIdsList = data.menuIds
          this.routerLoading = false
          this.isSwitch = false
        } catch (error) {
          this.routerLoading = false
        }
      },

      // 获取角色list
      async getRoleAll() {
        try {
          this.roleLoading = true
          const { data } = await getRoleAllList()
          this.roleList = data
          this.roleLoading = false
        } catch (error) {
          this.roleLoading = false
        }
      },

      // 获取路由list
      async getRouterAll() {
        try {
          this.routerLoading = true
          const { data } = await getRouterList()
          this.routerList = data.data
          this.routerLoading = false
        } catch (error) {
          this.routerLoading = false
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .roleBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    margin-bottom: 15px;
    width: 230px;
    height: 40px;
    border: 4px dashed #e4e6ef;
    border-radius: 10px;
    cursor: pointer;

    img {
      width: 50px;
      height: 50px;
    }

    .roleName {
      margin-left: 10px;
      font-style: 22px;
      font-weight: 600;
    }

    .selectBox {
      width: 35px;
      height: 35px;
      background-color: #f5f8fa;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .roleBoxActive {
    background-color: #f1faff;
    border-color: #0096ea;

    .selectBox {
      background-color: #0096ea;
      color: #fff;
    }
  }
</style>
